<template>
  <div style="width: 100%;height: 100%">
    <!-- 查询预约 -->
    <div>
      <el-input v-model="searchName" placeholder="输入预约人姓名"  style="width: 300px;"></el-input>
      <el-date-picker v-model="searchDate" type="date" placeholder="选择预约日期"  style="width: 300px;"></el-date-picker>
      <el-button type="primary" @click="searchAppointments">查询</el-button>
    </div>

    <!-- 新增预约按钮 -->
    <div>
      <el-button type="success" @click="showAddModal">新增预约</el-button>
    </div>

    <!-- 预约列表 -->
    <div class="table-container">
      <el-table :data="appointments" stripe>
        <el-table-column prop="patient_name" label="预约人姓名"></el-table-column>
        <el-table-column prop="appointment_date" label="预约日期"></el-table-column>
        <el-table-column prop="appointment_time" label="预约时间"></el-table-column>
        <el-table-column prop="doctor_name" label="医生姓名"></el-table-column>
        <el-table-column prop="appointment_purpose" label="预约目的"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增预约模态框 -->
    <el-dialog title="新增预约" :visible.sync="addModalVisible">
      <el-form :model="newAppointment" label-width="100px">
        <el-form-item label="预约人姓名">
          <el-input v-model="newAppointment.patient_name"></el-input>
        </el-form-item>
        <el-form-item label="预约日期">
          <el-date-picker v-model="newAppointment.appointment_date" type="date" value-format="yyyy-MM-dd"
                          placeholder="选择预约日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-time-picker v-model="newAppointment.appointment_time" value-format="HH:mm:ss"
                          placeholder="选择预约时间"></el-time-picker>
        </el-form-item>
        <el-form-item label="医生姓名">
          <el-input v-model="newAppointment.doctor_name"></el-input>
        </el-form-item>
        <el-form-item label="预约目的">
          <el-input v-model="newAppointment.appointment_purpose"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-input v-model="newAppointment.status"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModalVisible = false">取消</el-button>
        <el-button type="primary" @click="addAppointment">确认新增</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      searchName: '',
      searchDate: '',
      appointments: [], // 预约列表数据
      addModalVisible: false, // 新增预约模态框可见性
      newAppointment: {
        patient_name: '',
        appointment_date: '',
        appointment_time: '',
        doctor_name: '',
        appointment_purpose: '',
        status: ''
      }
    };
  },
  mounted() {
    // 在组件加载完成后发送请求获取预约数据
    this.fetchAppointments();
  },
  methods: {
    // 获取预约数据
    fetchAppointments() {
      axios.get('http://localhost:8080/appointments/selectAll')
          .then(response => {
            this.appointments = response.data.data;
          })
          .catch(error => {
            console.error('Error fetching appointments:', error);
          });
    },
    // 查询预约
    searchAppointments() {
      // 发送请求，根据searchName和searchDate查询预约信息，并更新appointments数据
      // 可以在此处调用 fetchAppointments() 方法来重新获取数据
    },
    // 显示新增预约模态框
    showAddModal() {
      this.addModalVisible = true;
    },
    // 新增预约
    addAppointment() {
      console.log('New Appointment:', JSON.stringify(this.newAppointment));
      axios.post('http://localhost:8080/appointments/add', this.newAppointment)
          .then(response => {
            // 新增成功后关闭模态框并刷新预约列表
            this.addModalVisible = false;
            this.fetchAppointments();
          })
          .catch(error => {
            console.error('Error adding appointment:', error);
          });
    },
    // 编辑预约
    handleEdit(row) {
      // 编辑预约逻辑
    },
    // 删除预约
    handleDelete(id) {
      axios.delete(`http://localhost:8080/appointments/delete/${id}`)
          .then(response => {
            this.fetchAppointments();
          })
          .catch(error => {
            console.error('Error deleting appointment:', error);
          });
    }
  }
};
</script>
